<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="common/common::html">
</head>
<body>
    <div th:replace="common/common::body"></div>
    
    <style>
        /* 表格容器样式 */
        .data-table-container {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 20px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        /* 表格头部样式 */
        .table-header {
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
            padding: 12px 15px;
            font-weight: bold;
            display: flex;
            align-items: center;
            color: #333;
        }
        
        .table-header .checkbox-wrapper {
            margin-right: 15px;
        }
        
        .table-header .column-header {
            flex: 1;
            text-align: center;
            padding: 0 5px;
        }
        
        .table-header .column-header:first-child {
            text-align: left;
        }
        
        /* 表格内容区域 */
        .table-content {
            min-height: 400px;
            position: relative;
            background: #fff;
        }
        
        /* 空数据消息 */
        .empty-table-message {
            text-align: center;
            color: #999;
            padding: 80px 0;
            font-size: 14px;
            display: none;
        }
        
        .empty-table-message i {
            font-size: 48px;
            color: #ddd;
            margin-bottom: 10px;
        }
        
        /* 加载状态 */
        .loading-message {
            position: absolute;
            bottom: 15px;
            right: 15px;
            color: #666;
            font-size: 12px;
            display: flex;
            align-items: center;
            background: rgba(255,255,255,0.9);
            padding: 5px 10px;
            border-radius: 15px;
        }
        
        .loading-icon {
            width: 16px;
            height: 16px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 分页控件样式 */
        .pagination-container {
            background: #f5f5f5;
            border-top: 1px solid #ddd;
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .pagination-left {
            display: flex;
            align-items: center;
            color: #666;
        }
        
        .pagination-left select {
            margin: 0 8px;
            padding: 4px 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            background: #fff;
        }
        
        .pagination-center {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .pagination-center input {
            width: 50px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 4px;
            background: #fff;
        }
        
        .pagination-center button {
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 4px 8px;
            cursor: pointer;
            color: #333;
            font-size: 12px;
        }
        
        .pagination-center button:hover {
            background: #f0f0f0;
        }
        
        .pagination-center button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .go-button {
            background: #337ab7;
            color: white;
            border: none;
            border-radius: 3px;
            padding: 4px 12px;
            cursor: pointer;
            margin-left: 8px;
            font-size: 12px;
        }
        
        .go-button:hover {
            background: #286090;
        }
        
        /* 状态样式 */
        .status-pending {
            color: #f0ad4e;
            font-weight: bold;
        }
        
        .status-accepted {
            color: #5cb85c;
            font-weight: bold;
        }
        
        .status-rejected {
            color: #d9534f;
            font-weight: bold;
        }
        
        /* 操作按钮样式 */
        .operation-buttons {
            display: flex;
            gap: 5px;
            justify-content: center;
        }
        
        .operation-buttons .btn {
            padding: 2px 6px;
            border-radius: 3px;
            text-decoration: none;
            color: #333;
        }
        
        .operation-buttons .btn:hover {
            background: #f0f0f0;
        }
    </style>
    
    <header>
        <input id="file-name-id" th:placeholder="#{file.name.plc}">

        <input id="sender-id" th:placeholder="#{share.sender.plc}">

        <input type="date" id="start-time-id" th:placeholder="#{share.time.start}">

        <input type="date" id="end-time-id" th:placeholder="#{share.time.end}">

        <select id="status-id">
            <option value="">全部状态</option>
            <option value="0" th:text="#{share.status.pending}"></option>
            <option value="1" th:text="#{share.status.accepted}"></option>
            <option value="2" th:text="#{share.status.rejected}"></option>
        </select>

        <a href="#" class="btn-info btn" onclick="searchReceivedShares()">
            <i class="glyphicon glyphicon-search"></i>
            <span th:text="#{common.query}"></span>
        </a>

        <a href="#" class="btn-default btn" onclick="resetSearch()">
            <i class="glyphicon glyphicon-refresh"></i>
            <span th:text="#{common.reset}"></span>
        </a>

        <a href="#" sec:authorize="hasRole('ROLE_cldk_file_share_accept')" class="btn-success btn" onclick="batchAcceptShare()">
            <i class="glyphicon glyphicon-ok"></i>
            <span th:text="#{quoteinfo.accept.batch}"></span>
        </a>

        <a href="#" sec:authorize="hasRole('ROLE_cldk_file_share_reject')" class="btn-danger btn" onclick="batchRejectShare()">
            <i class="glyphicon glyphicon-remove"></i>
            <span th:text="#{quoteinfo.reject.batch}"></span>
        </a>

        <a href="#" class="btn-info btn" th:href="@{/disk/file/filePage}">
            <i class="glyphicon glyphicon-folder-open"></i>
            <span th:text="#{file.return.list}"></span>
        </a>

    </header>

    <!-- 表格容器 -->
    <div class="data-table-container">
        <!-- 表格头部 -->
        <div class="table-header">
            <div class="checkbox-wrapper">
                <input type="checkbox" id="select-all-checkbox" onclick="toggleSelectAll()">
            </div>
            <div class="column-header" th:text="#{file.name}">文件名</div>
            <div class="column-header" th:text="#{share.sender}">发送者</div>
            <div class="column-header" th:text="#{share.time}">分享时间</div>
            <div class="column-header" th:text="#{share.expire.time}">过期时间</div>
            <div class="column-header" th:text="#{share.status}">状态</div>
            <div class="column-header" th:text="#{common.operation}">操作</div>
        </div>

        <!-- 表格内容区域 -->
        <div class="table-content">
            <!-- 数据表格 -->
            <table id="quoteinfo-grid"></table>
            
            <!-- 空数据消息 -->
            <div class="empty-table-message">
                <i class="glyphicon glyphicon-inbox"></i>
                <p>暂无收到分享数据</p>
            </div>
            
            <!-- 加载状态 -->
            <div class="loading-message" style="display: none;">
                <div class="loading-icon"></div>
                <span>正在处理数据,请稍候...</span>
            </div>
        </div>

        <!-- 分页控件 -->
        <div class="pagination-container">
            <div class="pagination-left">
                <span>每页显示条数</span>
                <select id="page-size-select">
                    <option value="10">10</option>
                    <option value="20" selected>20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
            
            <div class="pagination-center">
                <button id="first-page" title="第一页">K</button>
                <button id="prev-page" title="上一页"><<</button>
                <span>当前页</span>
                <input type="number" id="current-page-input" value="1" min="1">
                <span>总页数</span>
                <span id="total-pages">1</span>
                <button id="next-page" title="下一页">>></button>
                <button id="last-page" title="最后一页">K</button>
                <button id="go-button" class="go-button">GO</button>
            </div>
            
            <div class="pagination-right">
                <!-- 右侧可以添加其他信息 -->
            </div>
        </div>
    </div>

    <!-- 接受分享对话框 -->
    <div id="accept-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_accept')" style="display: none;">
        <p th:text="#{quoteinfo.accept.confirm}"></p>
    </div>

    <!-- 拒绝分享对话框 -->
    <div id="reject-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_reject')" style="display: none;">
        <p th:text="#{quoteinfo.reject.confirm}"></p>
    </div>

    <!-- 批量接受分享对话框 -->
    <div id="batch-accept-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_accept')" style="display: none;">
        <p th:text="#{quoteinfo.accept.batch.confirm}"></p>
    </div>

    <!-- 批量拒绝分享对话框 -->
    <div id="batch-reject-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_reject')" style="display: none;">
        <p th:text="#{quoteinfo.reject.batch.confirm}"></p>
    </div>

    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        var currentPage = 1;
        var totalPages = 1;
        var pageSize = 20;
        var isLoading = false;

        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;
            _gridHeight = $(document).height()-65 -40;
        }

        $(function () {
            resizePageSize();
            initQuoteinfoGrid();
            initPagination();
            initDialogs();
        });

        // 初始化收到分享列表
        function initQuoteinfoGrid() {
            var _columnWidth = (_gridWidth - 300) / 4;

            $("#quoteinfo-grid").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{/disk/quoteinfo/queryReceivedShareList}]]*/'',
                dataType: 'json',
                colModel: [
                    {display: /*[[#{file.name}]]*/'', name: 'fileName', width: _columnWidth, sortable: true, align: 'left'},
                    {display: /*[[#{share.sender}]]*/'', name: 'senderName', width: _columnWidth, sortable: true, align: 'center'},
                    {display: /*[[#{share.time}]]*/'', name: 'shareTime', width: _columnWidth, sortable: true, align: 'center'},
                    {display: /*[[#{share.expire.time}]]*/'', name: 'expireTime', width: _columnWidth, sortable: true, align: 'center'},
                    {
                        display: /*[[#{share.status}]]*/'',
                        name: 'status',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center',
                        process: function (v, _trid, _row) {
                            var statusText = '';
                            var statusClass = '';
                            if (v == 0) {
                                statusText = /*[[#{share.status.pending}]]*/'';
                                statusClass = 'status-pending';
                            } else if (v == 1) {
                                statusText = /*[[#{share.status.accepted}]]*/'';
                                statusClass = 'status-accepted';
                            } else if (v == 2) {
                                statusText = /*[[#{share.status.rejected}]]*/'';
                                statusClass = 'status-rejected';
                            }
                            return '<span class="' + statusClass + '">' + statusText + '</span>';
                        }
                    },
                    {
                        display: /*[[#{common.operation}]]*/'',
                        name: 'shareId',
                        width: 150,
                        sortable: false,
                        align: 'center',
                        process: function (v, _trid, _row) {
                            var html = '<div class="operation-buttons">';
                            var hasAcceptRole = /*[[${#authorization.expression("hasRole('ROLE_cldk_file_share_accept')")}]]*/ false;
                            var hasRejectRole = /*[[${#authorization.expression("hasRole('ROLE_cldk_file_share_reject')")}]]*/ false;
                            var acceptText = /*[[#{quoteinfo.accept}]]*/ '';
                            var rejectText = /*[[#{quoteinfo.reject}]]*/ '';
                            
                            if(hasAcceptRole) {
                                html += '<a href="#" class="btn" onclick="acceptShare(\'' + v + '\')" title="' + acceptText + '"><i class="glyphicon glyphicon-ok"></i></a>';
                            }
                            if(hasRejectRole) {
                                html += '<a href="#" class="btn" onclick="rejectShare(\'' + v + '\')" title="' + rejectText + '"><i class="glyphicon glyphicon-remove"></i></a>';
                            }
                            html += '</div>';
                            return html;
                        }
                    }
                ],
                resizable: false,
                useRp: true,
                usepager: true,
                autoload: false,
                hideOnSubmit: true,
                showcheckbox: true,
                rowbinddata: true,
                onSuccess: function(data) {
                    updatePagination(data);
                    hideLoading();
                    if (data.rows && data.rows.length === 0) {
                        showEmptyMessage();
                    } else {
                        hideEmptyMessage();
                    }
                },
                onError: function() {
                    hideLoading();
                    showEmptyMessage();
                }
            });
            searchReceivedShares();
        }

        // 初始化分页控件
        function initPagination() {
            // 每页显示条数变化事件
            $("#page-size-select").change(function() {
                pageSize = parseInt($(this).val());
                currentPage = 1;
                searchReceivedShares();
            });

            // GO按钮点击事件
            $("#go-button").click(function() {
                var page = parseInt($("#current-page-input").val());
                if (page >= 1 && page <= totalPages) {
                    currentPage = page;
                    searchReceivedShares();
                }
            });

            // 分页按钮事件
            $("#first-page").click(function() {
                if (currentPage > 1) {
                    currentPage = 1;
                    searchReceivedShares();
                }
            });

            $("#prev-page").click(function() {
                if (currentPage > 1) {
                    currentPage--;
                    searchReceivedShares();
                }
            });

            $("#next-page").click(function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    searchReceivedShares();
                }
            });

            $("#last-page").click(function() {
                if (currentPage < totalPages) {
                    currentPage = totalPages;
                    searchReceivedShares();
                }
            });
        }

        // 更新分页信息
        function updatePagination(data) {
            if (data && data.page) {
                currentPage = data.page;
                totalPages = data.total || 1;
                
                $("#current-page-input").val(currentPage);
                $("#total-pages").text(totalPages);
                
                // 更新按钮状态
                $("#first-page, #prev-page").prop('disabled', currentPage <= 1);
                $("#next-page, #last-page").prop('disabled', currentPage >= totalPages);
            }
        }

        // 显示加载状态
        function showLoading() {
            isLoading = true;
            $(".loading-message").show();
            $(".empty-table-message").hide();
        }

        // 隐藏加载状态
        function hideLoading() {
            isLoading = false;
            $(".loading-message").hide();
        }

        // 显示空数据消息
        function showEmptyMessage() {
            $(".empty-table-message").show();
        }

        // 隐藏空数据消息
        function hideEmptyMessage() {
            $(".empty-table-message").hide();
        }

        // 搜索收到分享
        function searchReceivedShares() {
            if (isLoading) return;
            
            showLoading();
            var fileName = $("#file-name-id").val();
            var sender = $("#sender-id").val();
            var startTime = $("#start-time-id").val();
            var endTime = $("#end-time-id").val();
            var status = $("#status-id").val();

            $("#quoteinfo-grid").flexOptions({
                params: [
                    {name: 'fileName', value: fileName},
                    {name: 'sender', value: sender},
                    {name: 'startTime', value: startTime},
                    {name: 'endTime', value: endTime},
                    {name: 'status', value: status},
                    {name: 'page', value: currentPage},
                    {name: 'pageSize', value: pageSize}
                ]
            }).flexReload();
        }

        // 重置搜索条件
        function resetSearch() {
            $("#file-name-id").val('');
            $("#sender-id").val('');
            $("#start-time-id").val('');
            $("#end-time-id").val('');
            $("#status-id").val('');
            currentPage = 1;
            searchReceivedShares();
        }

        // 全选/取消全选
        function toggleSelectAll() {
            var isChecked = $("#select-all-checkbox").prop('checked');
            $(".row-checkbox").prop('checked', isChecked);
        }

        // 接受分享
        function acceptShare(shareId) {
            $("#accept-share-dialog-id").attr('shareId', shareId);
            $("#accept-share-dialog-id").dialog('open');
        }

        // 拒绝分享
        function rejectShare(shareId) {
            $("#reject-share-dialog-id").attr('shareId', shareId);
            $("#reject-share-dialog-id").dialog('open');
        }

        // 批量接受分享
        function batchAcceptShare() {
            var ids = $("#quoteinfo-grid").getFlexigridiAttrByIndex(0);
            if (ids.length === 0) {
                message(/*[[#{common.empty}]]*/'');
                return;
            }
            $("#batch-accept-share-dialog-id").attr('shareIds', ids.join(','));
            $("#batch-accept-share-dialog-id").dialog('open');
        }

        // 批量拒绝分享
        function batchRejectShare() {
            var ids = $("#quoteinfo-grid").getFlexigridiAttrByIndex(0);
            if (ids.length === 0) {
                message(/*[[#{common.empty}]]*/'');
                return;
            }
            $("#batch-reject-share-dialog-id").attr('shareIds', ids.join(','));
            $("#batch-reject-share-dialog-id").dialog('open');
        }

        // 初始化对话框
        function initDialogs() {
            // 接受分享对话框
            $("#accept-share-dialog-id").dialog({
                autoOpen: false,
                width: 300,
                modal: true,
                resizable: false,
                title: /*[[#{quoteinfo.accept}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var shareId = $(this).attr('shareId');
                            $.post(/*[[@{/disk/quoteinfo/acceptShare}]]*/'', {shareId: shareId}, function(data) {
                                message(data.msg);
                                if (data.success) {
                                    $("#accept-share-dialog-id").dialog('close');
                                    searchReceivedShares();
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            // 拒绝分享对话框
            $("#reject-share-dialog-id").dialog({
                autoOpen: false,
                width: 300,
                modal: true,
                resizable: false,
                title: /*[[#{quoteinfo.reject}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var shareId = $(this).attr('shareId');
                            $.post(/*[[@{/disk/quoteinfo/rejectShare}]]*/'', {shareId: shareId}, function(data) {
                                message(data.msg);
                                if (data.success) {
                                    $("#reject-share-dialog-id").dialog('close');
                                    searchReceivedShares();
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            // 批量接受分享对话框
            $("#batch-accept-share-dialog-id").dialog({
                autoOpen: false,
                width: 300,
                modal: true,
                resizable: false,
                title: /*[[#{quoteinfo.accept.batch}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var shareIds = $(this).attr('shareIds');
                            $.post(/*[[@{/disk/quoteinfo/acceptShareBatch}]]*/'', {shareIds: shareIds}, function(data) {
                                message(data.msg);
                                if (data.success) {
                                    $("#batch-accept-share-dialog-id").dialog('close');
                                    searchReceivedShares();
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            // 批量拒绝分享对话框
            $("#batch-reject-share-dialog-id").dialog({
                autoOpen: false,
                width: 300,
                modal: true,
                resizable: false,
                title: /*[[#{quoteinfo.reject.batch}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var shareIds = $(this).attr('shareIds');
                            $.post(/*[[@{/disk/quoteinfo/rejectShareBatch}]]*/'', {shareIds: shareIds}, function(data) {
                                message(data.msg);
                                if (data.success) {
                                    $("#batch-reject-share-dialog-id").dialog('close');
                                    searchReceivedShares();
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        }
    </script>
</body>
</html>